<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-date"></i> 订单管理</el-breadcrumb-item>
                <el-breadcrumb-item>订单信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-row :gutter="4" style="margin-bottom:20px">
                <el-col :span="4">
                    <el-select clearable placeholder="按用户查找" @change="searchBtn"  collapse-tags v-model='tableData.userId' style="width:100%;">
                        <el-option v-for="item in options2" :key="item._id" :label="item.name" :value="item._id">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span='12' style="text-align:left" >
                    <el-button type="primary"  @click="searchBtn">搜索</el-button>
                </el-col>   
                <el-col :span="2" >
                    <el-button type="primary" :disabled="selectState===1" @click='daifukuan'>待付款</el-button>
                </el-col>
                <el-col :span="2"  >
                    <el-button type="primary" :disabled="selectState===2" @click='daishouhuo'>待收货</el-button>
                </el-col>
                <el-col :span="2"  >
                    <el-button type="primary" :disabled="selectState===3" @click='daipingjia'>待评价</el-button>
                </el-col>        
                <el-col :span="2" style="text-align:right" >
                    <el-button type="primary" @click='addOrderDialog'>新增</el-button>
                </el-col>
            </el-row>
            <el-table :data="tableData.orders" style="width: 100%" border center>
                <el-table-column label="序号"  width="60px" align="center" >
                    <template scope="scope"><span>{{scope.$index+(tableData.currentPage - 1) * tableData.pageSize + 1}} </span></template>
                </el-table-column>
                <el-table-column prop="name" label="订单号" align="center" >
                </el-table-column>
                <el-table-column prop="userId.name" label="用 户" align="center" >
                </el-table-column>
                <el-table-column prop="orderGoodsId.goodId.name" label="商品名" align="center">
                </el-table-column>
                <el-table-column prop="orderGoodsId.count" label="商品数量" align="center">
                </el-table-column>
                <el-table-column prop="time" label="下单时间" width="200px" align="center">
                </el-table-column>
                <el-table-column prop="state" label="状态" align="center" :formatter = "stateFormat">
                </el-table-column>
                <el-table-column label="操作" align="center" width='150'>
                    <template slot-scope="scope">
                        <el-button @click='changeState(scope.row.name,scope.row._id,scope.row.state)' type="text" size="small">
                            修改状态
                        </el-button>
                        <el-button  @click='xx(scope.row.name,scope.row._id)' type="text" size="small">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row style='margin-top:150px'>
                <el-col :span='24' style="text-align:center">
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"  :current-page="tableData.currentPage" :page-sizes="[5, 10, 20, 30]" :page-size="tableData.pageSize" layout="total, sizes, prev, pager, next, jumper"
                        :total="tableData.totalCount">
                    </el-pagination>
                </el-col>
            </el-row>
        </div>

        <!-- 新增订单 -->
        <el-dialog width='35%' title="新增订单" :visible.sync="addOrder">
            <el-form ref="nameForm" label-width="120px">
                <el-form-item prop="username" label="选择用户">
                    <el-select clearable placeholder="选择用户"   collapse-tags v-model='form.userId' style="width:100%;">
                        <el-option v-for="item in options2" :key="item._id" :label="item.name" :value="item._id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="username" label="选择商品">
                    <el-select clearable placeholder="选择商品" @change="selectTrigger"   collapse-tags v-model='form.goodId' style="width:100%;">
                        <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item._id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="username" label="选择门店">
                    <el-select clearable placeholder="选择门店"   collapse-tags v-model='form.shopsId' style="width:100%;">
                        <el-option v-for="item in mendian" :key="item.value" :label="item.name" :value="item._id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="username" label="选择数量">
                    <el-input placeholder="选择数量" v-model='form.count' clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click='addOrderBtn'>新增</el-button>
            </div>
        </el-dialog>

        <!--修改订单-->
        <el-dialog width='35%' title="修改状态" :visible.sync="dlgEdit">
            <el-form ref="nameForm" label-width="120px">
                <el-form-item prop="username" label="名称">
                    <el-input placeholder="名称" v-model='form2.name'></el-input>
                </el-form-item>
                <el-form-item prop="username" label="修改状态">
                    <el-select placeholder="修改状态"  collapse-tags v-model='form2.state' style="width:100%;">
                        <el-option v-for="item in states" :key="item.value" :label="item.value" :value="item.num">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click='updateOrder'>修改</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
  data: function() {
    return {
      value1: [],
      dlgRelationAPI: false,
      addOrderScope: false,
      options: [],
      options2: [],
      mendian: [],
      imageUrl: "",
      imageUrl2: "./static/img/dingding.png",
      addOrder: false,
      dlgEdit: false,
      tableData: {
        currentPage: 1,
        pageSize: 5,
        totalCount: 0,
        orders: [],
        userId: "",
        state:1,
      },
      isShowBatchSend:true,
      // fullscreenLoading: false,
      form2: {
        _id: "钉钉",
        name:'',
        state: 1,
      },
      selectState:1,
      states:[{value:"待付款",num:1},{value:"待收货",num:2},{value:"待评价",num:3}],
      form: {
        shopsId: "",
        userId: "",
        goodId: "",
        mendianId: "",
        count: "",
        time: "",
        state:1,
      },
      shopId: ""
    };
  },
  watch: {},
  mounted() {
    this.getOrders();
    this.$axios.get("/users").then(res => {
        this.options2 =res.data;
      });
  },
  methods: {
      stateFormat(row, column) {
        if (row.state === 1) {
          return '待付款'
        } else if (row.state === 2) {
          return '待收货'
        } else if (row.state === 3) {
          return '待评价'
        }
      },
    getOrders() {
      const { currentPage, pageSize, userId,state } = this.tableData;
      this.$axios
        .get("/orders", { params: { currentPage, pageSize, userId, state} })
        .then(res => {
          this.tableData = res.data;
        });
    },
    changeState(name,_id,state){
        this.form2._id=_id;
        this.form2.name=name;
        this.form2.state=state;
        this.dlgEdit = true;
    },
    xx(name,type) {
      // var x = type == 1 ? '上' : '下'
      this.$confirm("是否将该订单 “" + name + "” 删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .post("/orders/deleteOrdersById", { _id: type })
            .then(res => {
              this.getOrders();
            });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    addOrderDialog() {
      this.addOrder = true;
      this.$axios.get("/orders/getGoods").then(res => {
        this.options = res.data;
      });
    },
    daifukuan(){this.tableData.state=1;this.selectState=1; this.getOrders();},
    daishouhuo(){this.tableData.state=2;this.selectState=2;this.getOrders();},
    daipingjia(){this.tableData.state=3;this.selectState=3;this.getOrders();},
    updateOrder(){
        this.dlgEdit = false
        this.$axios.post("/orders/updataOrder",{...this.form2}).then(res => {
        this.$message({
              type: "success",
              message: "修改成功!"
            });
            this.getOrders();
      });
    },
    selectTrigger(e) {
      if (this.options.length > 0) {
        const aa = this.options.filter(v => v._id == e);
        this.$axios
          .get("/orders/getmendian", { params: { _id: aa[0].shopId } })
          .then(res => {
            // this.options=res.data;
            this.mendian = res.data;
          });
      }
    },
    addOrderBtn() {
      this.addOrder = false;
      this.$axios
        .post("/orders", {
          ...this.form,
          time: new Date().toLocaleString(),
          state: 1
        })
        .then(res => {
          if (res.data) {
            this.$message({
              type: "success",
              message: "新增成功!"
            });
            this.getOrders();
          }
        });
    },
    handleSizeChange(e) {
      this.tableData.pageSize = e;
      this.getOrders();
    },
    handleCurrentChange(e) {
      this.tableData.currentPage = e;
      this.getOrders();
    },
    searchBtn() {
      this.getOrders();
    }
  }
};
</script>
<style scope>
#appManage .el-upload--text {
  width: 78px;
  height: 78px;
}

#appManage .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

#appManage .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 78px;
  height: 78px;
  line-height: 78px;
  text-align: center;
}

#appManage .avatar {
  width: 78px;
  height: 78px;
  display: block;
}
</style>
